<template>
  <div class="header">
    <div class="header-on">
      <div class="left">
        <i
          :class="{ 'el-icon-s-fold f20 showMenu' : !this.$store.state.isCollapse, 'el-icon-s-unfold f20 showMenu': this.$store.state.isCollapse}"
          @click="toggleMenu"
        />
        <div class="wel">
          新疆大学考务系统欢迎你：
          <span class="red">{{this.$store.state.teaid}}</span>，不使用请及时注销，重载页面请使用右侧的魔法棒
        </div>
      </div>

      <div class="right">
        <div class="select">
          当前用户身份：
          <el-select v-model="identity" @change="getIdentitySelected">
            <el-option
              v-for="item in options"
              :key="item.identityid"
              :label="item.identity"
              :value="item.identity"
            ></el-option>
          </el-select>
        </div>
        <div class="user">
          <i class="reloadPage el-icon-magic-stick f20 b" title="智能刷新页面" @click="reloadPage()"></i>
          <el-dropdown @command="handlePopMenu">
            <i class="el-icon-user-solid f20" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user" command="changePassword">&nbsp;修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-lock" command="logout">&nbsp;注销退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <el-tabs
      v-model="activeTabName"
      type="border-card"
      closable
      @tab-click="clickTab"
      @tab-remove="removeTab"
    >
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabs" :key="item.label"></el-tab-pane>
    </el-tabs>
    <admin-edit dialog-form-title="修改密码" ref="adminEdit"></admin-edit>
  </div>
</template>

<script>
import Loading from "@/plugins/loading";
import Message from "@/plugins/message";
import AdminEdit from "@/views/admin/edit.vue";
import axios from "axios";

export default {
  name: "tf-header",
  components: {
    AdminEdit
  },
  data() {
    return {
      options: [],
      identities: [
        {
          value: "1",
          label: "教师"
        },
        {
          value: "2",
          label: "教务处"
        },
        {
          value: "3",
          label: "考试中心"
        },
        {
          value: "4",
          label: "门户维护人员"
        }
      ],
      identity: "",
      dialogFormVisible: false,
      dialogId: this.$store.state.userid,
      dialogEditTime: 0,
      fullscreen: false,
      activeTabName: "/index/main",
      tabs: [
        {
          label: "首页面板",
          name: "/index/main"
        }
      ]
    };
  },
  created() {
    // var len = this.$store.state.identities.length;
    // for (var i = 0; i < len; i++) {
    //   this.options.push(this.$store.state.identities[i]);
    // }
    // this.identity = this.options[0].identity;
    // this.$store.state.identity = this.identity;
    // console.log(this.identity);
    axios.get("/identity",{
      params:{
        teaid:this.$store.state.teaid
      }
    }).then(res => {
      this.options = res.data.data;
      this.identity = this.options[0].identity;
      this.$store.state.identity = this.identity;
      // console.log(this.identity);
    })
  },
  mounted(){
    
  },
  methods: {
    getIdentitySelected: function() {
      // console.log(this.identity);
      switch (this.identity) {
        case "教师":
          this.$store.state.identity = this.identity;
          break;
        case "教务处":
          this.$store.state.identity = this.identity;
          break;
        case "考试中心":
          this.$store.state.identity = this.identity;
          break;
        case "门户维护人员":
          // console.log("155")
          this.$store.state.identity = this.identity;
          break;
      }
      // console.log(this.$store.state.identity)
      // console.log("1215")
    },
    toggleMenu: function() {
      this.$store.commit("toggleMenu");
    },
    toggleDialog: function(flag) {
      flag && (this.dialogEditTime = new Date().getTime());
      this.$refs.adminEdit.toggleDialog(flag);
    },
    logout: function() {
      this.$store.commit("logout");
      Message.success("注销成功");
      this.$router.replace("/login");
    },
    handlePopMenu: function(command) {
      switch (command) {
        case "changePassword":
          this.toggleDialog(true);
          break;
        case "logout":
          this.logout();
          break;
      }
    },
    addTab: function() {
      if (this.$route.path !== "/") {
        const newTab = {
          label: this.$route.meta.label,
          name: this.$route.path
        };
        const isExists = this.tabs.some(
          (tab, index) => tab.label === newTab.label
        );
        !isExists && this.tabs.push(newTab);
        this.activeTabName = this.$route.path;
      }
    },
    clickTab: function(tab, event) {
      this.activeTabName = tab.name;
      this.$router.push({ path: tab.name });
    },
    removeTab: function(targetName) {
      const tempTabs = this.tabs;
      if (this.activeTabName === targetName) {
        tempTabs.every((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tempTabs[index + 1] || tempTabs[index - 1];
            if (nextTab) {
              this.activeTabName = nextTab.name;
            }
            return false;
          }
          return true;
        });
      }
      this.tabs = tempTabs.filter(tab => tab.name !== targetName);
      this.$router.push({ path: this.activeTabName });
    },
    reloadPage: function() {
      Loading.open();
      Message.success("智能刷新页面完成，请查看");
      this.$store.dispatch("updateReloadPageTime");
      Loading.close();
    },
    // 放到header中是为了避免没有权限的情况下仍然创建tab
    checkMenuFromUrl: function() {
      // if (
      //   this.$store.state.userid !== 1 &&
      //   !this.$store.state.rules.includes(
      //     `Menu${this.$route.path.replace(/\//g, "-")}`
      //   )
      // ) {
      //   Message.error(this.$store.state.authTip);
      //   this.$router.replace("/index/main");
      //   return false;
      // }
      return true;
    },
    loadMine() {
      // empty for change password call
    }
  },
  mounted: function() {
    this.checkMenuFromUrl() && this.addTab();
  },
  watch: {
    $route: function(to, from) {
      this.checkMenuFromUrl() && this.addTab();
    }
  }
};
</script>

<style>
.el-tabs__nav .el-tabs__item span {
  display: inline;
}
.el-tabs__nav .el-tabs__item:nth-child(1) span {
  display: none;
}
.el-tabs__nav-scroll {
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}
</style>

<style scoped>
.header-on {
  display: flex;
  justify-content: space-between;
}
.wel {
  position: absolute;
  height: 20px;
  line-height: 20px;
  left: 60px;
  right: 90px;
  top: 10px;
  overflow: hidden;
}
.select {
  position: absolute;
  line-height: 20px;
  right: 120px;
}
el-select {
  width: 100px;
  height: 18px;
}
.el-dropdown {
  position: absolute;
  height: 20px;
  line-height: 20px;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.showMenu {
  position: absolute;
  height: 20px;
  line-height: 20px;
  top: 10px;
  left: 20px;
  cursor: pointer;
}
.reloadPage {
  position: absolute;
  height: 20px;
  line-height: 20px;
  top: 10px;
  right: 60px;
  cursor: pointer;
}
.el-tabs {
  width: 97%;
  height: 39px;
  overflow: hidden;
  padding-top: 35px;
  padding: 35px 1.5% 0 1.5%;
  float: left;
}
</style>
